<!-- 水质仪 -->
<template>
  <div class="shuizhiyi">
    <div class="item" @click="godetails(item)" v-for="item in list" v-bind:key="item.id">
      <van-image width="50" height="50" :src="img" />
      <div>{{ item.productName }}</div>

      <van-button type="info" size="mini" @click.stop="setconfig(item)">阀值</van-button>

      <van-button type="danger" size="mini" @click.stop="unbind(item)">解绑</van-button>
    </div>


  </div>
</template>

<script>
import { Toast, Dialog } from 'vant';
import { sensorSimpleList } from "../../../api/sensor";

import { userDeviceDel } from "../../../api/user";

export default {
  name: "",
  data() {
    return {
      list: [],
      img: require("../../../assets/images/shuizhiyi.png"),
    };
  },
  methods: {
    setconfig(uitem) {

      this.$router.push({ path: "/fazhilist", query: { dev_sn: uitem.dev_sn, aid: this.$route.query.aid } });
    },
    godetails(val) {
      console.log("val", val);

      this.$router.push({ path: "/water-charts", query: { code: val.dev_sn } });
    },
    async getData() {



      var areaid = this.$route.query.aid;

      console.log("first", areaid);
      let res = await sensorSimpleList({ userid: localStorage.getItem("userid"), areaid: areaid });


      if (res.status == 200) {

        this.list = res.data;
      }
    },
    async unbind(uitem) {
      Dialog.confirm({
        title: '系统提示',
        message: '确定要解绑吗？',
      })
        .then(async () => {
          let res = await userDeviceDel({ id: uitem.userdevice_id });
          if (res.status == 200) {
            this.$toast("解绑成功");
            this.getData();

          }
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  computed: {},
  watch: {},
  async created() {
    this.getData();

  },
  mounted() { },
};
</script>

<style lang="scss" scoped>
.shuizhiyi {
  width: 100%;
  height: 100%;
  padding: 30px 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  .item {
    padding: 10px 20px;
    width: 100%;
    height: 120px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 25px;
    align-items: center;
    font-size: 28px;
    margin-bottom: 20px;
  }
}
</style>